#slide {
    position: relative;
    height: 80vh;

    .slide_img {
        opacity: 1;
        width: 100%;
        height: 80vh;
        overflow: hidden;

        img {
            width: 100%;
            height: 80vh;
            transition: 2s;
            opacity: .8;
            transform: scale(1.5);
            transition: all 0.3s;
            /* 添加过渡效果 */

        }

        @keyframes at {
            0% {
                opacity: 0;
                transform: translateY(25%);

            }

            100% {
                opacity: 1;
                transform: translateY(0%);
            }
        }

    }

    .slide_content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: #fff;
        display: flex;
        align-items: center;
        flex-direction: column;

        .slide_content1 {
            width: 140px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 2rem;
            border-radius: 20px;
            background-color: rgba(75, 74, 74, .6);
        }

        h2 {
            font-size: 6rem;
            color: #fff;
        }

        .slide_btn {
            width: 140px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #ed1d24;
            border-radius: 2px;
            font-size: 2rem;
            transition: .5s;

            &:hover {
                background-color: transparent;
                border: 2px solid #fff;

                a {
                    text-decoration: underline;
                }
            }

            a {
                color: #fff;
                text-decoration: none;
                transition: .5s;
            }

        }

        @media screen and(max-width:874px) {
            .slide_content1 {
                font-size: 1.5rem;
                width: 100px;
                height: 30px;
            }

            h2 {
                font-size: 4rem;
            }

            .slide_btn {
                width: 100px;
                height: 40px;
                font-size: 1.8rem;
                line-height: 40px;
            }
        }

        @media screen and(max-width:584px) {
            .slide_content1 {
                font-size: 1.2rem;
                width: 80px;
                height: 30px;
            }

            h2 {
                font-size: 3rem;
            }

            .slide_btn {
                width: 80px;
                height: 30px;
                font-size: 1.4rem;
                line-height: 30px;
            }
        }

        @media screen and(max-width:439px) {
            .slide_content1 {
                width: 60px;
                height: 20px;
                line-height: 20px;
                font-size: 1rem;
            }

            h2 {
                font-size: 1.5rem;
            }

            .slide_btn {
                width: 60px;
                height: 30px;
                font-size: 1rem;
                line-height: 30px;
            }
        }
    }

    .previous,
    .next {
        position: absolute;
        z-index: 2;
        width: 80px;
        height: 60px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(42, 42, 42, .7);

        span {
            color: #fff;
            font-size: 4rem;
        }
    }

    .previous {
        left: 0;
        top: 50%;
        transform: translateY(-25%);
    }

    .next {
        right: 0;
        top: 50%;
        transform: translateY(-25%);
    }
}

#col-4-section {
    .container {
        display: flex;
        flex-direction: column;

        .titles {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 40px;

            h1 {
                width: auto;
                font-size: 5rem;
                line-height: 80px;
                color: #000;
                border-bottom: 2px solid #ed1d24;
            }

            p {
                font-size: 3rem;
                color: #717376;
                margin-top: 10px;
                margin-bottom: 60px;
            }
        }

        .col {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;

            .row {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 50px;
                width: 30%;

                div {
                    width: 100px;
                    height: 100px;
                    background-color: #f9f9f9;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        color: #ed1d24;
                        font-size: 6rem;
                    }
                }

                h2 {
                    color: #4f4d4d;
                    font-size: 3rem;
                }

                p {
                    width: 80%;
                    font-size: 2rem;
                    text-align: center;
                    color: #868686;
                }

            }
        }

        @media screen and(max-width:786px) {
            .col {
                flex-wrap: nowrap;
                flex-direction: column;
                align-items: center;

                .row {
                    width: 50%;

                    h2 {
                        font-size: 2.4rem;
                    }
                }
            }
        }
    }
}

#col-5-section {
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .col {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 96%;

            .row {
                width: 30%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20px;
                margin-left: 4%;

                .a {
                    width: 100%;
                    position: relative;

                    img {
                        width: 100%;
                        height: 30vh;
                        border-radius: 4px;

                    }

                    span {
                        position: absolute;
                        left: 4px;
                        bottom: 10px;
                        width: 100px;
                        height: 40px;
                        background-color: #fff;
                        color: #212529;
                        font-size: 2rem;
                        text-align: center;
                        line-height: 40px;
                        border-radius: 4px;
                    }

                }

                .row1 {
                    width: 100%;
                    border: 1px solid #efeded;

                    h2 {
                        width: 100%;
                        font-size: 2.5rem;
                        text-align: center;
                    }

                    .b {
                        width: 90%;
                        margin: 0 auto;

                        .b1 {
                            color: #ed1d24;
                            font-size: 1.2rem;
                        }

                        .b2 {

                            margin: 0 15px 0 5px;
                            color: #737272;
                        }

                        .c {
                            margin-left: 5px;
                            color: #737272;
                        }
                    }

                    .d {
                        width: 100px;
                        height: 30px;
                        background-color: #f5f5f5;
                        line-height: 30px;
                        text-align: center;
                        border-radius: 40px;
                        margin: 25px 5%;

                        &:hover {
                            color: #fcfcfc;
                            text-decoration: underline;
                        }
                    }
                }

            }
        }

        @media screen and (max-width:1081px) {
            .col {
                .row {
                    .row1 {
                        h2 {
                            font-size: 1.5rem;
                        }

                        .b {

                            .b2,
                            .c {
                                font-size: 1.4rem;
                            }
                        }

                        .d {
                            font-size: 1.4rem;
                        }
                    }
                }
            }
        }

        @media screen and (max-width:786px) {
            .col {
                flex-direction: column;
                align-items: center;

                .row {
                    width: 70%;

                    .row1 {
                        h2 {
                            width: 90%;
                            margin: 0 auto;
                            font-size: 2.5rem;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}

#col-6-section {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .col-img {
        width: 25%;
        height: 40vh;
        position: relative;
        overflow: hidden;


        &:hover .mb {
            transform: translateY(100%);
        }

        img {
            width: 100%;
            height: 100%;
        }

        .mb {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: -100%;
            background-color: rgba(69, 66, 68, .7);
            font-size: 20rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: all .5s;
        }
    }

}

@media screen and (max-width:1081px) {
    #col-6-section {
        .col-img {
            height: 30vh;
        }
    }
}

@media screen and (max-width:890px) {
    #col-6-section {
        .col-img {
            height: 20vh;
        }
    }
}

@media screen and (max-width:786px) {
    #col-6-section {
        flex-direction: column;

        .col-img {
            width: 100%;
            height: 40vh;
        }
    }
}

#col-7-section {
    .container {
        .col {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            margin-top: 40px;
            align-items: center;

            >img {
                width: 45%;

                object-fit: cover;
            }

            .row {
                width: 50%;
                height: 100%;

                .title {
                    h2 {
                        color: #ed1d24;
                        font-size: 5rem;
                        line-height: 1.5;
                    }

                    span {
                        font-size: 5rem;
                        color: #0b0b0b;
                        line-height: 1.5;
                        border-bottom: 2px solid #ed1d24;
                        // width: 55%;
                    }

                }

                >p {
                    width: 90%;
                    font-size: 2rem;
                    margin-top: 20px;
                    color: #5a5959;
                }

                .row1 {
                    display: flex;
                    margin-top: 20px;
                    align-items: center;

                    .img {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        border: 2px solid #e3e3e3;
                        background-color: #f9f9f9;

                        svg {
                            fill: #f05157;
                            width: 75%;
                            height: 50%;
                        }
                    }

                    .conts {
                        margin-left: 10px;

                        h3 {
                            font-size: 1.6rem;
                            color: #4a4848;
                        }

                        p {
                            color: #5a5959;
                            font-size: 1.6rem;
                            width: 80%;
                        }

                    }
                }

                .abq {
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    background-color: #ed1d24;
                    border: 1px solid #ed1d24;
                    margin-top: 20px;

                    a {
                        color: white;

                    }

                    &:hover {
                        background-color: #fff;
                    }

                    &:hover a {
                        color: #ed1d24;
                        text-decoration: underline;
                    }
                }
            }
        }

        @media screen and (max-width:1286px) {
            .col {
                .row {
                    .title {

                        h2,
                        span {
                            font-size: 3rem;
                        }
                    }
                }
            }
        }

        @media screen and (max-width:1096px) {
            .col {
                .row {
                    .row1 {
                        .img {
                            width: 70px;
                            height: 70px;
                        }
                    }
                }
            }
        }

        @media screen and (max-width:956px) {
            .col {
                .row {
                    .row1 {
                        .img {
                            width: 50px;
                            height: 50px;
                        }
                    }
                }
            }
        }
     

        @media screen and (max-width:786px) {
            .col {
                flex-direction: column;

                img {
                    width: 80%;
                }

                .row {
                    width: 80%;

                    .title {

                        h2,
                        span {
                            font-size: 3rem;
                        }
                    }

                    p {
                        width: 100%;
                    }

                    .row1 {
                        .img {
                            width: 80px;
                            height: 80px;
                        }
                    }
                }
            }
        }
        @media screen and (max-width:415px) {
            .col {
                .row {
                    .row1 {
                        .img {
                            width: 144px;
                            height: 55.3px;
                        }
                    }
                }
            }
        }
    }
}

#col-8-section {

    background: linear-gradient(to bottom, rgba(32, 32, 86, .9), rgba(00, 00, 00, .5)), url('../picture/blog_img_4.jpg') no-repeat center center;
    background-size: auto 100%;
    position: relative;
    height: 50vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 80px;

    .row {
        width: 30%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
            font-size: 8rem;

            color: #ed1d24;

        }

        .che {
            transform: scaleX(1.2);
        }

        .sz {
            font-size: 4rem;
            color: white;
            margin-top: -14px;
        }

        p {
            font-size: 3rem;
            color: #6d6e73;
        }
    }
}

@media screen and (max-width:786px) {
    #col-8-section {
        flex-direction: column;
        height: 70vh;
        align-items: center;

        .row {
            height: 10vh;

            span {
                font-size: 7rem;
            }

            .sz {
                font-size: 3rem;
                margin-top: -14px;
            }

            p {
                font-size: 1.5rem;

            }
        }
    }

}

#col-9-section {
    .container {
        .col {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            margin-top: 40px;
            margin-bottom: 60px;

            .row {
                width: 30%;
                height: 64vh;
                background-color: #2b2b2d;
                border-radius: 2px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .col9-img {
                    width: 100px;
                    height: 100px;
                    margin: 50px 0 20px;

                    img {
                        border-radius: 50%;
                        width: 100%;
                        height: 100%;
                    }
                }

                h4 {
                    font-size: 2rem;
                    color: white;
                }

                h6 {
                    font-size: 1.4rem;
                    color: #d51f25;
                    margin: 10px 0 20px;
                }

                p {
                    width: 70%;
                    font-size: 2rem;
                    color: #aeaeae;
                }

                .icon {
                    display: flex;
                    margin-top: 30px;

                    .icon1 {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #ed1d24;
                        margin: 0 5px;

                        &:hover {
                            box-shadow: 0 0 10px #fff;
                        }

                        span {
                            color: white;
                            font-size: 3rem;
                        }
                    }
                }
            }
        }

        @media screen and (max-width:1000px) {
            .col {
                .row {
                    height: 53vh;

                    p {
                        font-size: 1.4rem;
                    }

                    .icon {
                        margin-top: 20px;

                        .icon1 {
                            width: 30px;
                            height: 30px;

                            span {
                                color: white;
                                font-size: 2rem;
                            }
                        }
                    }
                }
            }
        }

        @media screen and (max-width:786px) {
            .col {
                flex-direction: column;
                align-items: center;

                .row {
                    width: 93%;
                    margin-top: 40px;
                    height: 70vh;

                    .col9-img {
                        width: 150px;
                        height: 150px;
                        margin: 30px 0 20px;
                    }

                    h4 {
                        font-size: 3rem;
                    }

                    h6 {
                        font-size: 2rem;
                    }

                    p {
                        width: 70%;
                        font-size: 2rem;
                        color: #aeaeae;
                    }

                    .icon {
                        .icon1 {
                            width: 60px;
                            height: 60px;

                            span {
                                color: white;
                                font-size: 3rem;
                            }
                        }
                    }
                }
            }
        }

        @media screen and(max-width:415px) {
            .col {
                .row {
                    .icon {
                        .icon1 {
                            width: 30px;
                            height: 30px;

                            span {
                                color: white;
                                font-size: 2rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

#col-10-section {
    .container {
        .col {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            margin-top: 90px;
            margin-bottom: 60px;
            flex-wrap: wrap;

            .row {
                flex-direction: column;
                border: 1px solid #ed1d24;
                height: 70vh;
                width: 30%;
                border-radius: 2px;
                transition: all .5s;
                display: flex;

                &:hover {
                    transform: scale(1.1);
                }

                h1 {
                    color: #ed1d24;
                }

                h2 {
                    color: #4a4848;
                    font-weight: bold;
                }

                .contes {

                    .conte {

                        .duigou {
                            color: #f0454b;
                        }

                        p {
                            border-bottom: 1px solid #e3e3e4;
                        }
                    }
                }

                .btn:hover {
                    background-color: transparent;
                    text-decoration: underline;
                    color: #f0454b;
                }
            }

            .break {
                width: 30%;
                height: 75vh;
                background-color: #2b2b2d;
                margin-top: -5vh;
                border-radius: 2px;
                transition: all .5s;

                &:hover {
                    transform: scale(1.1);
                }

                h1 {
                    color: #d7d7d7;
                    text-align: center;
                }

                h2 {
                    color: #ffffff;
                    font-weight: bold;
                    text-align: center;
                }

                .contes {

                    .conte {

                        .duigou {
                            color: #fff;
                        }

                        p {
                            color: white;
                            border-bottom: 1px solid #a0a0a1;
                        }
                    }
                }

                .btn {
                    &:hover {
                        background-color: transparent;
                        text-decoration: underline;
                        color: #fff;
                    }

                    border: 1px solid #fff;

                }
            }

            h1 {
                font-size: 3rem;
                margin: 20px auto 0;
            }

            h2 {
                font-size: 6rem;
                margin: 0px auto 0;
            }

            .contes {
                margin: -10px 10% 0 10%;

                .conte {
                    display: flex;
                    margin-top: 10px;

                    .duigou {
                        width: 20px;
                        height: 20px;
                        border-radius: 4px;
                        border: 1px solid #f0454b;
                        text-align: center;
                        font-size: 0.8rem;
                        line-height: 23px;
                    }

                    p {
                        width: 100%;
                        text-align: center;
                        line-height: 20px;
                        height: 30px;
                    }
                }
            }

            .btn {
                width: 100px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.6rem;
                margin: 30px auto 0;
                background-color: #ed1d24;
                color: white;
                transition: all .5s;


            }
        }

        @media screen and (max-width:940px) {
            .col {
                justify-content: space-between;

                .row {
                    width: 48%;
                    margin-top: 40px;

                }

                .break {
                    width: 48%;
                    margin-top: 40px;
                }
            }

        }

        @media screen and (max-width:786px) {
            .col {

                .row {
                    width: 100%;
                }

                .break {
                    width: 100%;
                }
            }

        }

        @media screen and(max-width:415px) {
            .col {
                margin-top: 10px;

                .row {
                    margin-left: 0;
                }

            }
        }
    }
}

#title {
    background-color: #2b2b2d;
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .wz {
        width: 50%;
        font-size: 4rem;
        color: white;
        padding: 3rem 0 2rem;
        text-align: center;
    }

    .a {
        padding: 2rem 0 3rem;

        a {
            width: 100px;
            height: 50px;
            border-radius: 4px;
            background-color: #ed1d24;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;

            &:hover {
                background-color: transparent;
                color: #ed1d24;
                text-decoration: underline;
                border: 2px solid #ed1d24;
            }
        }
    }

    @media screen and(max-width:415px) {
        .wz {
            width: 100% !important;
            font-size: 1.2rem !important;
        }

        .a {
            a {
                width: 68px !important;
                height: 28px !important;
                font-size: 1.2rem !important;
            }
        }
    }
}

#col-11-section {
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .col {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 96%;
            margin-top: 4rem;

            .row {
                width: 30%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20px;
                margin-left: 4%;

                .a {
                    width: 100%;
                    position: relative;

                    img {
                        width: 100%;
                        height: 40vh;
                        border-radius: 4px;

                    }

                    span {
                        position: absolute;
                        left: 10px;
                        bottom: 10px;
                        width: 100px;
                        height: 40px;
                        background-color: #ed1d24;
                        color: #fff;
                        font-size: 1.4rem;
                        text-align: center;
                        line-height: 40px;
                        border-radius: 20px;
                    }

                }

                .row1 {
                    width: 100%;
                    border: 1px solid #efeded;

                    h2 {
                        width: 90%;
                        margin: 10px auto 0;
                        font-size: 2.5rem;

                    }

                    p {
                        width: 90%;
                        margin: 10px auto 0;
                        font-size: 1.5rem;
                    }

                    .b {
                        width: 90%;
                        margin: 10px auto 0;

                        .b1 {
                            color: #ed1d24;
                            font-size: 1.2rem;
                        }

                        .b2 {

                            margin: 0 15px 0 5px;
                            color: #737272;
                        }

                        .c {
                            margin-left: 5px;
                            color: #737272;
                        }
                    }

                    .d {
                        width: 100px;
                        height: 30px;
                        background-color: #2b2b2d;
                        line-height: 30px;
                        text-align: center;
                        border-radius: 40px;
                        margin: 25px 5%;
                        color: white;

                        &:hover {
                            color: #fff;
                            text-decoration: underline;
                        }
                    }
                }

            }
        }

        @media screen and (max-width:1081px) {
            .col {
                .row {
                    .row1 {
                        h2 {
                            font-size: 1.5rem;
                        }

                        .b {

                            .b2,
                            .c {
                                font-size: 1.4rem;
                            }
                        }

                        .d {
                            font-size: 1.4rem;
                        }
                    }
                }
            }
        }

        @media screen and (max-width:786px) {
            .col {
                flex-direction: column;
                align-items: center;

                .row {
                    width: 70%;

                    .row1 {
                        h2 {
                            width: 90%;
                            margin: 0 auto;
                            font-size: 2.5rem;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}